<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll" back :background="globalData.colors.current.section">
				<view slot="title">
					<view id="title" class="fw-bolder">{{renders.main_title}}</view>
				</view>
			</nii-navbar>
		</view>
		<view id="content_wrapper">
			<view class="bg-white px-30">
				<view v-if="renders.teams.enable" class="theme-main-bg-color p-30 text-white b-r16">
					<view class="d-flex j-sb">
						<view class="d-flex flex-column a-center ">
							<view class="font-24">
								{{renders.teams.performance.name}}
							</view>
							<view class="font-50">
								{{renders.teams.performance.text}}
							</view>
						</view>
					</view>
					<view class="d-flex mt-40">
						<view class="d-flex flex-column flex-1">
							<view class="font-24">
								{{renders.teams.big_zone.name}}
							</view>
							<view class="font-40">
								{{renders.teams.big_zone.text}}
							</view>
						</view>
						<view class="d-flex flex-column flex-1">
							<view class="font-24">
								{{renders.teams.big_zone_user.name}}
							</view>
							<view class="font-40">
								{{renders.teams.big_zone_user.text}}
							</view>
						</view>
					</view>
					<view class="d-flex mt-40">
						<view class="d-flex flex-column  flex-1">
							<view class="font-24">
								{{renders.teams.small_zone.name}}
							</view>
							<view class="font-40">
								{{renders.teams.small_zone.text}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {
					card: ''
				},
				shows: {

				},
				
				
				
				renders: {
					main_title: "",
					teams: {
						enable: false,
						performance: {
							name: "",
							text: "0.00"
						},
						big_zone: {
							name: "",
							text: "0.00"
						},
						big_zone_user: {
							name: "",
							text: ""
						},
						small_zone: {
							name: "",
							text: "0.00"
						}
					}
				},
				data: {
					sections: {
						formData: {type: '', page: 1, alias: ''},
						lists: {mode: 'loading', lists: []},
					},
				},
				request_url: ''
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			that.initInformation();
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			that.request_url = "user/" + options.alias + "_log";
			console.log(that.options);
			console.log(that.request_url);
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType); },
			//拨打电话
			callPhone: function(mobile) {uni.makePhoneCall({phoneNumber: mobile});},
			//复制数据
			clipboardData: function (text) {const that = this;that.nii_common.clipboardData(text);},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				that.nii_common.toastLoading('加载中');		
				//发起请求
				that.nii_common.request.build('teams/size_zone', that.options, 'GET', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置数据
					that.renders = res.data;
					//设置信息
					// that.styles.card = ['background:url('+res.data.background+') no-repeat top center / cover'].join(';');
					//获取列表
					// that.getLists(true);
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);	
			},
			transferAction: function(formData) {
				//设置对象
				let that = this;
				//验证数据
				if (uni.$u.test.isEmpty(that.renders.sections.tools.transfer.username)) {
					//提示信息
					return that.nii_common.toastAlert('请输入接收人用户名');
				}
				//跳转转账页面
				that.navigateAction('user_score.transfer', {username: that.renders.sections.tools.transfer.username, type: that.renders.sections.tools.transfer.type});
			},
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
			//获取列表
			that.getLists();
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	.page_color {
		color: #FFFFFF;
	}
	#header_wrapper {
		// padding-bottom: 80rpx;
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		#main {
			margin-top: 66rpx;
			.main {
				.main_box {
					.title {
						font-size: 26rpx;
						line-height: 36rpx;
					}
					.amount {
						margin-top: 20rpx;
						font-size: 60rpx;
						line-height: 84rpx;
					}
				}
			}
		}
	}
	#content_wrapper {
		padding-bottom: 300rpx;
		#amounts {
			.amounts {
				.amounts_box {
					padding: 30rpx 20rpx;
					.amount {
						.cover_box {
							width: 60rpx;
							height: 60rpx;
							margin-right: 20rpx;
						}
						.infos {
							width: 260rpx;
							.title {
								font-size: 24rpx;
								line-height: 34rpx;
							}
							.amount {
								margin-top: 10rpx;
								font-size: 40rpx;
								line-height: 56rpx;
							}
						}
					}
				}
			}
		}
		#tools {
			margin-top: 30rpx;
			.tools {
				.tools_box {
					padding: 40rpx 20rpx;
					border-radius: 20rpx;
					.lists {
						.tool {
							.cover_box {
								width: 50rpx;
								height: 50rpx;
								margin-right: 10rpx;
							}
							.name {
								font-size: 28rpx;
								line-height: 40rpx;
							}
						}
					}
					#transfer {
						margin-top: 40rpx;
						border-radius: 20rpx;
						.form {
							padding: 30rpx;
							.name {
								font-size: 28rpx;
								line-height: 40rpx;
							}
							.input {
								margin-top: 20rpx;
								border-radius: 20rpx;
								padding: 20rpx 30rpx;
								font-size: 24rpx;
								line-height: 34rpx;
							}
							.button {
								margin-top: 30rpx;
								border-radius: 20rpx;
								padding: 22rpx 0;
								width: 610rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
		#ad {
			margin-top: 30rpx;
		}
		#properties {
			margin-top: 30rpx;
			.properties {
				.properties_box {
					.title {
						font-size: 32rpx;
						line-height: 44rpx;
					}
					.section {
						margin-top: 30rpx;
						padding: 20rpx 20rpx 20rpx 30rpx;
						border-radius: 20rpx;
						.left {
							.cover_box {
								width: 80rpx;
								height: 80rpx;
								margin-right: 10rpx;
							}
							.infos {
								.name {
									font-size: 28rpx;
									line-height: 40rpx;
								}
								.desc {
									margin-top: 10rpx;
									font-size: 24rpx;
									line-height: 34rpx;
								}
							}
						}
					}
				}
			}
		}
		
		
		
	}
</style>